<!-- 
Author: 摘星fy
Editor: SublimeText
  Date: 2023-11-26 23:54:12
    QQ: 273259755
    WX: y273259755
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
  <title>脑图 | By 摘星fy</title>
  <style>
    * {padding: 0; margin: 0; font: inherit; box-sizing: border-box;}
    html, body {height: 100%;}

    #app {width: 100%; height: 100%; overflow: hidden;}
    #app canvas {width: 100%; height: 100%; vertical-align: top;}
    #app canvas:focus {background: #f3fbff;}

    #select-dir {position: fixed; right: 15px; top: 15px;}

    .brain-graph-editor {min-width: 200px; min-height: 100px;}
  </style>
</head>
<body>
  
<div id="app">
  <canvas id="canvas"></canvas>
</div>

<div id="select-dir"></div>

<script type="module">
import './lib/app-aux.js'
import BrainGraphControl from './lib/lib-brain-graph-control.js'

const data = `
  db.php
    common.php
      app.php
        pub.php
        pri.php
          admin.php
          pri-task-record.php
          pri-task.php
          pri-user.php
`.split('\n').filter(v => v.trim()).map((name_, idx) => {
  const id = idx + 1
  const name = name_.trim()
  return {
    id,
    pid: 0,
    name,
    depth: name_.length - name.length
  }
})

for (let i = data.length - 1; i > -1; i--) {
  for (let j = i - 1; j > -1; j--) {
    if (data[j].depth < data[i].depth) {
      data[i].pid = data[j].id
      break
    }
  }
}
console.log(data)

const brainGraph = window.brainGraph = new BrainGraphControl({
  canvas: document.getElementById('canvas'),
  data,
  direction: 't',
  conf: {
    // rowSpace: 100
  },
})

const d = window.d = brainGraph.d
</script>

</body>
</html>